<template>
  <div class="app-container">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>定时任务</span>
          <el-button type="primary" @click="handleAdd">
            <el-icon><Plus /></el-icon>
            新增任务
          </el-button>
        </div>
      </template>

      <!-- 表格 -->
      <el-table
        v-loading="loading"
        :data="jobList"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="任务编号" align="center" prop="jobId" />
        <el-table-column label="任务名称" align="center" prop="jobName" />
        <el-table-column label="任务组名" align="center" prop="jobGroup" />
        <el-table-column label="调用目标" align="center" prop="invokeTarget" />
        <el-table-column label="cron表达式" align="center" prop="cronExpression" />
        <el-table-column label="状态" align="center" width="100">
          <template #default="scope">
            <el-switch
              v-model="scope.row.status"
              :active-value="0"
              :inactive-value="1"
              @change="handleStatusChange(scope.row)"
            />
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template #default="scope">
            <el-button type="text" @click="handleUpdate(scope.row)">
              <el-icon><Edit /></el-icon>
              修改
            </el-button>
            <el-button type="text" @click="handleDelete(scope.row)">
              <el-icon><Delete /></el-icon>
              删除
            </el-button>
            <el-button type="text" @click="handleRun(scope.row)">
              <el-icon><VideoPlay /></el-icon>
              执行一次
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

const loading = ref(false)
const jobList = ref<any[]>([])

const getList = () => {
  loading.value = true
  setTimeout(() => {
    jobList.value = [
      {
        jobId: 1,
        jobName: '系统默认（无参）',
        jobGroup: 'DEFAULT',
        invokeTarget: 'ryTask.ryNoParams',
        cronExpression: '0/5 * * * * ?',
        status: 0
      },
      {
        jobId: 2,
        jobName: '系统默认（有参）',
        jobGroup: 'DEFAULT',
        invokeTarget: 'ryTask.ryParams(\'ry\')',
        cronExpression: '0/5 * * * * ?',
        status: 0
      }
    ]
    loading.value = false
  }, 1000)
}

const handleSelectionChange = (selection: any[]) => {
  console.log('选中:', selection)
}

const handleAdd = () => {
  ElMessage.info('新增任务功能')
}

const handleUpdate = (row: any) => {
  ElMessage.info('修改任务: ' + row.jobName)
}

const handleDelete = (row: any) => {
  ElMessageBox.confirm('确认删除该任务?', '警告', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    ElMessage.success('删除成功')
  })
}

const handleStatusChange = (row: any) => {
  ElMessage.success('状态修改成功')
}

const handleRun = (row: any) => {
  ElMessageBox.confirm('确认要立即执行一次"' + row.jobName + '"任务吗?', '警告', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    ElMessage.success('执行成功')
  })
}

onMounted(() => {
  getList()
})
</script>

<style lang="scss" scoped>
.app-container {
  padding: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
